/**
 * Created by zhangyw on 2017/12/28.
 *
 * vue pagination component
 */

Vue.component('v-pagination', {
    template:
    '<div class="clearfix">' +
    '<ul class="pagination pagination-right">' +
    '<li>' +
    '<a @click="goFirst()">首页</a>' +
    '</li>' +
    '<li>' +
    '<a @click="prePage()">上一页</a>' +
    '</li>' +
    '<li v-for="page in pages" :class="{ active: pageNo == page}">' +
    '<a @click="changePage(page)">{{page}}</a>' +
    '</li>' +
    '<li>' +
    '<a @click="nextPage()">下一页</a>' +
    '</li>' +
    '<li>' +
    '<a @click="goLast()">尾页</a>' +
    '</li>' +
    '</ul>' +
    '</div>',
    props: {
        pageNo:Number,
        pageSize:Number,
        total:Number,
        pageCtrlNum:String
    },
    data: function () {
        return {
            totalPage:0
        }
    },
    methods: {
        prePage: function () {
            if (this.pageNo == 1) return;
            this.toPage(this.pageNo - 1);
        },
        nextPage: function () {
            if (this.pageNo == this.totalPage) return;
            this.toPage(this.pageNo + 1);
        },
        goFirst:function(){
            this.toPage(1);
        },
        goLast:function(){
            this.toPage(this.totalPage)
        },
        changePage: function (page) {
            this.toPage(page);
        },
        toPage: function(page){
            // 自定义toPage事件
            this.$emit("change", page);
        }
    },
    computed:{
        pages: function(){
            // 计算总页数
            this.totalPage = Math.ceil(this.total / this.pageSize);
            // 设置分页按钮数
            var pageCtrlNum = !this.pageCtrlNum ? 10 : Number(this.pageCtrlNum);

            // 计算按钮 开始页码 和 结束页码
            // 开始按钮页码，当前页码 - pageCtrlNum/2 (向上取整) + 1 (与计算两数字之间有几个数原理一样)
            var start = this.totalPage < pageCtrlNum ? 1 : this.pageNo - Math.ceil(pageCtrlNum /2) + 1;
            // 结束按钮页码，当前页码 + pageCtrlNum/2 (向下取整)
            var end = this.totalPage < pageCtrlNum ? this.totalPage : this.pageNo + Math.floor(pageCtrlNum /2);

            // 判断是否越界
            start = start <= 0 ? 1 : start;
            end = end >= this.totalPage ? this.totalPage : (end < pageCtrlNum ? pageCtrlNum : end);

            // 当 结束页面 - 开始页码 小于 pageCtrlNum -1 时，说明 按钮数不够，补充 start 数
            if (this.totalPage > pageCtrlNum && end - start < pageCtrlNum - 1) {
                start = end - pageCtrlNum + 1;
            }

            // 存储页码 即 开始页码 和 结束页面间所有页码
            var pages = [];
            for (var i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        }
    }
});